import React, { Component } from 'react'
import {connect} from 'react-redux'
import store from '../redux/store.js'

import {show,deletePlan} from '../actions/plan.js'
import CustomTextInput  from './customTextInput.js'
import CustomTextInput2  from './customTextInput2.js'

class Plan extends Component {
    constructor(props) {
        super(props);
         this.textInput = React.createRef();
    }
   
    componentDidMount(){
    //	console.log('componentDidMount')
 	// this.textInput.current.focusTextInput();
 	
 	this.refs.kld.focusTextInput();
 	this.refs.kld.pts();
// 	console.log(this.refs.kld.getValue())
// 	console.log(this.textInput.current.getValue())
 	console.log(this.ist)
 	console.log(this.refs.kld)
    }
    show(){
    	let b = this.props.planlist.show;
    	store.dispatch(show(!b));
    }
    delete(id){
     	 console.log(id)
   	store.dispatch(deletePlan(id));
    }
    detail(id){
     	 console.log(id);
    	this.props.history.push(`/detail/${id}`)
    }
    render () {
    	let list = this.props.planlist.planlist.map((item,index)=>{
    	return(
    		
    		<tr key = {item.id}>
                <td className="plan-title" onClick={this.detail.bind(this,item.id)}>{item.title}</td>
                <td className="plan-delect" onClick={this.delete.bind(this,item.id)}>删除</td>
            </tr>
    	)
    	})
        return (
            <div>
                <div className="plant">
                    <h3>计划表</h3>
                    <p onClick={this.show.bind(this)}>添加计划</p>
                </div>
                <table className="planlist">
                    <thead>
                        <tr>
                            <th>标题</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    
                       {list}
                    </tbody>
                </table>
                <CustomTextInput defaultValue="333" ref="kld" />
                <CustomTextInput defaultValue="4444" ref={ist=>this.ist= ist} />
                <CustomTextInput ref={this.textInput} />
                <CustomTextInput2 defaultValue="4" />
            </div>
        )
    }
}
const mapStateToProps = function(store){
	return {
		planlist:store.planlist
	}
}
export default connect(mapStateToProps)(Plan);